<template>
    <div style="padding:45px;">

             <div class="add-top flex p-l">
                <p>所在位置：</p>
                <router-link to='/index/contractoutIndex/contractterms' tag="a">合同</router-link>
                <p><i class="el-icon-arrow-right"></i></p>
                <p>合同修改</p>
            </div>



            <el-form :model="form" class="form-select">
                <el-form-item label="名称" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off" class="el-select1"></el-input>
                </el-form-item>

                <el-form-item label="备注" :label-width="formLabelWidth">
                  <el-input v-model="form.remark" autocomplete="off" class="el-select1"></el-input>
                </el-form-item>

                 <!-- <el-form-item v-for="(v,i) in roleArr" :key="i" :label="v.Category_Name + '：'" :label-width="formLabelWidth" class="rolearr">          

                    <el-checkbox-group v-model="checkList" class="rolelist">
                      <el-checkbox :label="vo.Id" v-for="(vo,i) in v.twocaseType" :key="i" >{{vo.Value}}</el-checkbox>
                    </el-checkbox-group>
            
                  </el-form-item> -->

                  <!-- <el-checkbox :label="v.Id" class="rolelistc">全选</el-checkbox> -->

                  <!-- <el-collapse class="zhedie">
                    <el-collapse-item v-for="(v,i) in roleArr" :key="i" :label-width="formLabelWidth" :name="v.Id">
                        <template slot="title">
                          {{v.Category_Name}}
                        </template>
                        <el-checkbox-group v-model="checkList" class="rolelist">
                          
                          <el-checkbox :label="vo.Id" v-for="(vo,i) in v.twocaseType" :key="i" class="rolelistc" @change="handleCheckedCitiesChange">{{vo.Value}}</el-checkbox>
                        </el-checkbox-group>
                        
                    </el-collapse-item>
                  </el-collapse> -->

                  <!-- <el-form-item v-for="(v,index) in roleArr" :key="index" :name="v.Id" :label='v.Category_Name' :label-width="formLabelWidth" >
                      {{'list' + index}}
                       <el-select
                        :value="'list' + index"
                        multiple
                        collapse-tags
                        class="el-select1"
                        @change='handleCheckedCitiesChange'
                        placeholder="请选择">
                        <el-option
                          v-for="(vo,i) in v.twocaseType" 
                          :key="i"
                          :label="vo.Value"
                          :value="vo.Id">
                        </el-option>
                      </el-select>
                  </el-form-item> -->

                  <el-form-item label='刑事案件' :label-width="formLabelWidth" >
                      <el-select
                        v-model="list0"
                        multiple
                        collapse-tags
                        class="el-select1"
                        @change='handleCheckedCitiesChange'
                        placeholder="请选择">
                        <el-option
                          v-for="(vo,i) in roleArr[0].twocaseType" 
                          :key="i"
                          :label="vo.Value"
                          :value="vo.Id">
                        </el-option>
                      </el-select>
                  </el-form-item>

                  <el-form-item label='专项' :label-width="formLabelWidth" >
                      <el-select
                        v-model="list1"
                        multiple
                        collapse-tags
                        class="el-select1"
                        @change='handleCheckedCitiesChange'
                        placeholder="请选择">
                        <el-option
                          v-for="(vo,i) in roleArr[1].twocaseType" 
                          :key="i"
                          :label="vo.Value"
                          :value="vo.Id">
                        </el-option>
                      </el-select>
                  </el-form-item>

                  <el-form-item label='民事案件' :label-width="formLabelWidth" >
                      <el-select
                        v-model="list2"
                        multiple
                        collapse-tags
                        class="el-select1"
                        @change='handleCheckedCitiesChange'
                        placeholder="请选择">
                        <el-option
                          v-for="(vo,i) in roleArr[2].twocaseType" 
                          :key="i"
                          :label="vo.Value"
                          :value="vo.Id">
                        </el-option>
                      </el-select>
                  </el-form-item>

                  <el-form-item label='仲裁' :label-width="formLabelWidth" >
                      <el-select
                        v-model="list3"
                        multiple
                        collapse-tags
                        class="el-select1"
                        @change='handleCheckedCitiesChange'
                        placeholder="请选择">
                        <el-option
                          v-for="(vo,i) in roleArr[3].twocaseType" 
                          :key="i"
                          :label="vo.Value"
                          :value="vo.Id">
                        </el-option>
                      </el-select>
                  </el-form-item>

                  <el-form-item label='顾问' :label-width="formLabelWidth" >
                      <el-select
                        v-model="list4"
                        multiple
                        collapse-tags
                        class="el-select1"
                        @change='handleCheckedCitiesChange'
                        placeholder="请选择">
                        <el-option
                          v-for="(vo,i) in roleArr[4].twocaseType" 
                          :key="i"
                          :label="vo.Value"
                          :value="vo.Id">
                        </el-option>
                      </el-select>
                  </el-form-item>

                  <el-form-item label='行政' :label-width="formLabelWidth" >
                      <el-select
                        v-model="list5"
                        multiple
                        collapse-tags
                        class="el-select1"
                        @change='handleCheckedCitiesChange'
                        placeholder="请选择">
                        <el-option
                          v-for="(vo,i) in roleArr[5].twocaseType" 
                          :key="i"
                          :label="vo.Value"
                          :value="vo.Id">
                        </el-option>
                      </el-select>
                  </el-form-item>



                  


                  <!-- <vuedraggable class="wrapper" v-model="list">
                    <transition-group>
                      <div v-for="item in list" :key="item" class="item">
                        <p>{{item}}</p>
                      </div>
                    </transition-group>
                  </vuedraggable> -->

                  <el-form-item label="条款排序：" :label-width="formLabelWidth"> 
                    
                  </el-form-item>

    
                  <div class="clause">

                  <vuedraggable class="list-group" element="ul" v-model="list"> 
                      <transition-group type="transition" :name="'flip-list'">
                        <li class="list-group-item" v-for="element in list" :key="element.Id"> 
                          
                          <el-checkbox class="grouplist" v-model="grouplist" :label="element.Id"  @change="checked=>groupfun(checked,element.Id)" >{{element.terms_name}}</el-checkbox>
                          
                        </li> 
                      </transition-group>
                  </vuedraggable>

                  <div class="right-content"> 
                      <div class="outcontent" v-for="vo in list" :key="vo.Id" v-if="vo.check == true">
                        <div class="content" v-html="vo.terms_content" >
                        </div>
                        <div class="option">
                            <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
                                <el-button size="mini" type="primary" icon="el-icon-edit" @click="gotoedit(vo.Id)"></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
                                <el-button size="mini" type="primary" icon="el-icon-delete" @click="gotodel(vo.Id)"></el-button>
                            </el-tooltip>
                        </div>
                      </div>
                      
                  </div>

                  </div>


            </el-form>





           


            <div slot="footer" class="dialog-footer">
              <div class="flex dialogFormVisivleFooter">
                  <el-button type="primary" @click="add_Member()" :disabled="isDisabled">保存</el-button>
              </div>
            </div>

    </div>
</template>
<script>
import qs from 'qs';
import vuedraggable from 'vuedraggable';


export default {
    components: {vuedraggable},
    data(){
        return{

            urlid:"",
            form:{
              name:"",
              remark:"",
            },

            roleArr:[],
            checkList:[],

            
            list0:[],
            list1:[],
            list2:[],
            list3:[],
            list4:[],
            list5:[],
            list6:[],
            list7:[],
            list8:[],
            list9:[],

            
            
           
            formLabelWidth:'',
            isDisabled:false,

            list: [],

            grouplist:[],

        }
    },

    updated() {
      // console.log(this.list)
    },
    methods:{
        lineCilck(row){
          this.$http.post('/yongxu/Document/getCasetype',{
          }).then((res)=>{
              this.roleArr = res.data
          })
          this.$http.post('/yongxu/Document/showmyContracttemplatedetails',qs.stringify({
              Id:row
          })).then((res)=>{
              this.modifyid = row
              this.form.name = res.data.template_name
              this.form.remark = res.data.note
              res.data.twoCasetypelists.forEach(e => {
                  this.checkList.push(e.diy_id)
              });
          })
        },

        clausedel(id){
            for (let i = 0; i < this.list.length; i++) {
                if(this.list[i].Id == id){
                  this.$delete(this.list,[i])
                }
            }
            
        },
        gotoupd(id){
            this.$router.push({path:`/index/contractoutIndex/contratclause?id=` + id})
        },
        handleCheckedCitiesChange(value){
            console.log(value)
        },
        groupfun(checked,val){
           
            if(checked == false){
                this.list.forEach(e => {
                    if(e.Id == val){
                      e.check = false
                      return false
                    }
                });
            }else if(checked == true){
                this.list.forEach(e => {
                    if(e.Id == val){
                      e.check = true
                      return false
                    }
                });
            }
        },
        gotoedit(id){
            this.$router.push({path:'/index/contractoutIndex/contratclause?id=' + id})
        },
        gotodel(id){
            this.list.forEach(e => {
                if(e.Id == id){
                  e.check = 1
                  return false
                }
            });
            for (let i = 0; i < this.grouplist.length; i++) {
              if(this.grouplist[i] == id){
                this.grouplist.splice(i,1);
              }
            }
            
        },

        add_Member(){
          // console.log(this.list0)
          // console.log(this.list1)
          // console.log(this.list2)

          // console.log(this.list3)
          // console.log(this.list4)
          // console.log(this.list5)
          
          if(this.form.name===""||this.form.name==null){
                this.$message({
                    message:'模板名称不能为空',
                    type:'warning'
                });
                return false
          }
          if(this.roleArr===""||this.roleArr==null){
                this.$message({
                    message:'条款不能为空',
                    type:'warning'
                });
                return false
          }
          if(this.checkList===""||this.checkList==null){
                this.$message({
                    message:'案件类型不能为空',
                    type:'warning'
                });
                return false
          }

          let listcontent = []
          this.list1 = this.list1.concat(this.list0)
          this.list2 = this.list2.concat(this.list1)
          this.list3 = this.list3.concat(this.list2)
          this.list4 = this.list4.concat(this.list3)
          listcontent = listcontent.concat(this.list4)
          console.log(listcontent)

          let terms = []
          for(let i = 0; i < this.list.length; i++){
              if(this.list[i].check == true){
                terms.push(this.list[i].Id)
              }
          }
          this.$http.post('/yongxu/Document/updmyContracttemplatepreserve',qs.stringify({
              Id:this.$route.query.id,
              User_Id:localStorage.getItem('userId'),
              template_name:this.form.name,
              note:this.form.remark,
              str:JSON.stringify(listcontent),
              terms:JSON.stringify(terms)
          })).then((res)=>{
              if(res.data.sign == 200){
                this.$message({
                  message:res.data.msg,
                  type:'success'
                })
                this.$router.push({path:`/index/contractoutIndex/contractout`})
              }else{
                this.$message({
                  message:res.data.msg,
                  type:'warning'
                })
              }
          })
      },
      addSelected(){
          this.$http.post('/yongxu/Document/calledTerms',qs.stringify({
              Id:this.$route.query.id,
          })).then((res)=>{
              this.list = res.data
              this.list.forEach(e => {
                  this.grouplist.push(e.Id)
              });
              this.addsurplus()
          })
      },
      addsurplus(){
          this.$http.post('/yongxu/Document/nocalledTerms',qs.stringify({
              Id:this.$route.query.id,
          })).then((res)=>{
              res.data.forEach(e => {
                  this.list.push(e)
              });
          })
      }

        
    },

    computed: {
        dragOptions () {
          return  {
            animation: 0,
            group: 'description',
            disabled: !this.editable,
            ghostClass: 'ghost'
          };
        },
    },
    
    created:function(){
        this.lineCilck(this.$route.query.id)
        this.addSelected()
        
    },

    
}
</script>
<style lang="scss">
@import '../../assets/sass/main.css';

.input{
    flex-direction: row;
    justify-content: flex-start;
    width: 250px;
    margin-right: 20px;
    border-radius: 45px;
    border: 1px solid #DDDDDD;
    
}
.case-input{
      width:  200px;
    height: 36px;
    /* border: 1px solid #DDDDDD; */
    border-top-left-radius: 45px;
    border-bottom-left-radius: 45px;
   
    padding-left: 21px;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    color: #4a4a4a;
    background-color: transparent;
}
.case-button{
    outline: none;
    width: 48px;
    height: 28px;
    border: none;
    border-radius: 36px 36px 36px 36px;
    background-color: #fefeff;
    margin-right: 4px;
    margin-top: 4px;
    cursor: pointer;
}
 .input:hover{
    border: 1px solid #7E2C2E;
}
.case-button:hover{
    background: #7E2C2E;
    color: #ffffff;
}
.case-child-end2{
    flex-direction: row;
    justify-content:space-between;
}
.selectMenu{
    margin-top: 20px;
}
.export{
  width: 25px;
  height: 25px;
  background: #7E2C2E;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
}
.el-table-column--selection .cell{
  padding: 0 !important;
}
// .dingzhi{
//   margin-right:20px;
//   height: 38px;
// }
.el-select1{
  width: 80% !important;
}
.rolearr .el-form-item__label{
  width: 100%;
  text-align: left;
}

.ueditortitle{
  width: 100%;
  margin-top:25px;
  text-align: left;
}
.ueditorlabel{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  .labellist{
    border:1px solid #222;
    margin-top:10px;
    text-align: center;
    padding:3px 5px;
    background: #f4f4f4;
    border: 1px solid #dddddd;
    border-radius: 2px;
    cursor: pointer;

  }
  .labellist:hover{
    transition: all 0.6s;
    border: 1px solid #00aeff;
    color:#00aeff
  }
}

.form-select{
  margin-top:30px;
  padding-left: 30px;
}


.flip-list-move {
  transition: transform 0.5s;
}

.no-move {
  transition: transform 0s;
}

.ghost {
  opacity: .5;
  background: #C8EBFB;
}

.clause{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.list-group {
  min-height: 20px;
  width: 170px;
}

.list-group-item {
  cursor: move;
  border:1px solid #ddd;
  padding: 10px 15px;
  border-top:0px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
 
  
}
.list-group-item:first-child{
  border-top:1px solid #ddd;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.list-group-item:last-child{
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.list-group-item .top{
  // width: 15px;
  // height: 15px;
  margin-right:10px;
}

.list-group-item i{ 
  cursor: pointer;
}
.right-content{ 
  width: 670px;
  border:1px solid #ddd;
  padding:10px;
  .outcontent{
    border:1px solid #ddd;
    border-radius: 5px;
    padding:10px;
    margin-bottom:10px;
  }  
  .option{
    text-align: right;
  }
}




.zhedie{
  margin:10px 0;
  
}
.rolelistc{
  margin-right:30px;
  margin-bottom:10px;
}
.titlecheck{
  margin-right:15px!important;
}
.grouplist{
  margin-right:10px!important;
}
.selectout{
  
}
</style>

